<template>
  <div class="crm-title-bar">
    <i class="color-horiz-bar" :class="barStyleName"></i>
    <h3 class="crm-title-text">{{ barTitle }}</h3>
  </div>
</template>


<script>
  export default{

    props:{
      barStyleName : {//颜色条的类名
        type: String,
        default : 'default'//默认的类名如 class="color-horiz-bar defaut",该值有传参barStyleName决定
      },

      barTitle : {
        type: String,
        default: '标题条名称'
      }
    },

    components: {

    }
  }
</script>


<style lang="less">//使用less预编译语言

  @import "../less/base";

  .crm-title-bar{

    &:extend(.clearfix all);//继承清除浮动

    @barHeight : 30px;

    padding-top: 10px;
    border-bottom: 1px solid #EDEDED;
    height:@barHeight;


    &>*{
    float: left;
    }

    .color-horiz-bar{

    height: inherit;
    width: 10px;

    &.default{//&相当于.color-horiz-bar.default
      background-color: rgb(241,206,29);
    }
    }

    .crm-title-text{
    height: inherit;
    line-height: @barHeight;
    padding-left: 6px;
    font-size: 14px;
    font-weight: normal;
    }
  }
</style>
